<template>
  <div class="width-style">
    <LevelOnePageTop moduleName="心理健康指南" :catagoryList="catagoryList"/>
    <el-row :gutter="20">
      <el-col :span="18">
        <div class="grid-content">
          <InnerModuleLong innerModuleName="心理卫生常识" :list="commonList"  :picSrc="require('@/assets/images/psychologyCommon.jpg')" routeName="/psychology/commonsense"/>
          <InnerModuleLong innerModuleName="心理行为问题" :list="behaviorList"  :picSrc="require('@/assets/images/psychologyBehavior.jpg')" routeName="/psychology/behavior"/>
          <InnerModuleLong innerModuleName="常见心理障碍" :list="barrierList" :picSrc="require('@/assets/images/psychologyBarrier.jpg')" routeName="/psychology/barrier"/>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content">
          <ModuleAdviser :doctorList="doctorList"/>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import LevelOnePageTop from '@/components/levelOnePageTop'
import {renderTime} from '@/utils/tools.js'
export default {
  name: "Psychology",
  layout: "homeLayout",
  components: { LevelOnePageTop },
  async asyncData({app}) {
    //获取当前类下的最热文章
    let res = await app.api.reqGeneralAllByCatalogue(9);
    if (res.code === 200) {
      for (let item of res.rows) {
        item.publishTime = renderTime(item.publishTime);
      }
    }
    //获取医生等列表
    let doctorRes=await app.api.reqAllDoctor();
    if(doctorRes.code===200){
      for(let doctor of doctorRes.rows){
        doctor.doctorAvatar=app.api.BASEURL+doctor.doctorAvatar
      }
    }
    //获取当类下的子分类的文章
    // let commonRes = await app.api.reqGeneralAllByCatalogue(27);//心理卫生常识
    // if (commonRes.code === 200) {
    //   for (let item of commonRes.rows) {
    //     item.publishTime = renderTime(item.publishTime);
    //   }
    // }
    let commonRes1 = await app.api.reqCoreGeneralByPage(100,1,3);
    let commonRes2 = await app.api.reqCoreGeneralByPage(101,1,3);
    let commonRes3 = await app.api.reqCoreGeneralByPage(102,1,3);
    let commonList
    if (commonRes1.code === 200&&commonRes2.code===200&&commonRes3.code===200) {
      commonList=commonRes1.rows.concat(commonRes2.rows,commonRes3.rows)
      for (let item of commonList) {
        item.publishTime = renderTime(item.publishTime);
      }
    }
    // let behaviorRes = await app.api.reqGeneralAllByCatalogue(28);//心理行为问题
    // if (behaviorRes.code === 200) {
    //   for (let item of behaviorRes.rows) {
    //     item.publishTime = renderTime(item.publishTime);
    //   }
    // }
    let behaviorRes1 = await app.api.reqCoreGeneralByPage(103,1,3);
    let behaviorRes2 = await app.api.reqCoreGeneralByPage(104,1,3);
    let behaviorList
    if (behaviorRes1.code === 200&&behaviorRes2.code===200) {
      behaviorList=behaviorRes1.rows.concat(behaviorRes2.rows)
      for (let item of behaviorList) {
        item.publishTime = renderTime(item.publishTime);
      }
    }
    // let barrierRes = await app.api.reqGeneralAllByCatalogue(29);//常见心理障碍
    // if (barrierRes.code === 200) {
    //   for (let item of barrierRes.rows) {
    //     item.publishTime = renderTime(item.publishTime);
    //   }
    // }
    let barrierRes1 = await app.api.reqCoreGeneralByPage(108,1,3);
    let barrierRes2 = await app.api.reqCoreGeneralByPage(109,1,3);
    let barrierList
    if (barrierRes1.code === 200&&barrierRes2.code===200) {
      barrierList=barrierRes1.rows.concat(barrierRes2.rows)
      for (let item of barrierList) {
        item.publishTime = renderTime(item.publishTime);
      }
    }
    return {
      catagoryList:res.rows,
      doctorList:doctorRes.rows,
      // commonList:commonRes.rows,
      // behaviorList:behaviorRes.rows,
      // barrierList:barrierRes.rows,
      commonList,
      behaviorList,
      barrierList,
    }
  },
};
</script>

<style scoped lang="less">
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.grid-content {
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.module-name {
  font-size: 20px;
  .icon-traditional {
    font-size: 24px;
    color: @themeColor;
  }
}
.modern-medical-img {
  width: 100%;
  height: 100%;
}
</style>

